﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery Animated Menu Demo</title>

<style>
	body {
		background-color:#333333;
		margin:0;
	}
	
	/* Firefox Dotted Outline Fix */
	a:active { 
		outline: none; 
	}
	
	/* Firefox Dotted Outline Fix */
	a:focus { 
		-moz-outline-style: none; 
	}
	
	/* Menu Body */
	ul#menu {
		width:80%;
		height:102px;
		background:url(bg.png) repeat-x;
		list-style:none;
		margin:0;
		padding:0;
		padding-top:20px;
		padding-left:20%;
	}
	
	/* Float LI Elements - horizontal display */
	ul#menu li {
		float:left;
	}
	
	/* Link - common attributes */
	ul#menu li a {
		background:url(sprite.png) no-repeat scroll top left;
		display:block;
		height:81px;
		position:relative;
	}
	
	/* Specify width and background position attributes specifically for the class: "home" */
	ul#menu li a.home {
		width:159px;
	}
	
	/* Specify width and background position attributes specifically for the class: "portfolio" */
	ul#menu li a.portfolio {
		width:157px;
		background-position:-159px 0px;
	}
	
	/* Span (on hover) - common attributes */
	ul#menu li a span {
		background:url(sprite.png) no-repeat scroll bottom left;
		display:block;
		position:absolute;
		top:0;
		left:0;
		height:100%;
		width:100%;
		z-index:100;
	}
	
	/* Span (on hover) - display pointer */
	ul#menu li a span:hover {
		cursor:pointer;
	}
	
	/* Shift background position on hover for the class: "home" */
	ul#menu li a.home span {
		background-position:0px -81px;
	}
	
	/* Shift background position on hover for the class: "portfolio" */
	ul#menu li a.portfolio span {
		background-position:-159px -81px;
	}
</style>

<!-- Include jQuery Library -->
<script src="jquery-1.2.2.pack.js" type="text/javascript"></script>

<!-- Let's do the animation -->
<script type="text/javascript">
	$(function() {
		// set opacity to nill on page load
		$("ul#menu span").css("opacity","0");
		// on mouse over
		$("ul#menu span").hover(function () {
			// animate opacity to full
			$(this).stop().animate({
				opacity: 1
			}, 'slow');
		},
		// on mouse out
		function () {
			// animate opacity to nill
			$(this).stop().animate({
				opacity: 0
			}, 'slow');
		});
	});
</script>
</head>

<body>
	<ul id="menu">
    	<li><a href="#" class="home"><span></span></a></li>
        <li><a href="#" class="portfolio"><span></span></a></li>
    </ul>
</body>

</html>
